<template>
    <div>
      <common-table
        :clientHeight="clientHeight"
        :columns="columns"
        :tableData="tableData"
        @touchScroll="touchSearch"
      ></common-table>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import { Toast } from "vant";
  import {  getQueryString } from "util/index.js";
  import CommonTable from "@/components/common-table/index.vue";
  
  export default {
    name: "App",
    components: { CommonTable },
    data() {
      return {
        title: "首页",
        token: null,
        params: {
          page: 1,
          size: 15,
        },
        total: 0,
        columns: [
          {
            title: "序号",
            fixed: 'left', 
            type: "seq",
            width: 60,
            align: "center",
          },
          {
            title: "采购业务员",
            key: "purchaser",
            field: "purchaser",
            width: 100,
            align: "center",
          },
          {
            title: "需求清单号",
            key: "contractNo",
            field: "contractNo",
            width: 100,
            align: "center",
          },
          {
            title: "状态",
            key: "purchaseStatusLabel",
            field: "purchaseStatusLabel",
            width: 100,
            align: "center",
          },
          {
            title: "项目名称",
            key: "programName",
            field: "programName",
            width: 100,
            align: "center",
          },
          {
            title: "项目编号",
            key: "programNumber",
            field: "programNumber",
            width: 100,
            align: "center",
          },
          {
            title: "类别",
            key: "contractCategory",
            field: "contractCategory",
            width: 100,
            align: "center",
          },
          {
            title: "供应商名称",
            key: "supplier",
            field: "supplier",
            width: 100,
            align: "center",
          },
          {
            title: "采购公司",
            key: "purchaseCorp",
            field: "purchaseCorp",
            width: 100,
            align: "center",
          },
          {
            title: "付款条件",
            key: "paymentCondition",
            field: "paymentCondition",
            width: 100,
            align: "center",
          },
          {
            title: "合同总金额",
            key: "purchaseAmount",
            field: "purchaseAmount",
            width: 100,
            align: "center",
          },
        ],
        clientHeight: 0,
        tableData: [],
      };
    },
    mounted() {
      let _this = this;
      _this.clientHeight = document.documentElement.clientHeight;
  
      getQueryString("token") &&
        (_this.token = getQueryString("token")) &&
        _this.getList();
  
      document.title = getQueryString("title");
  
      console.log("token", _this.token);
    },
    methods: {
      getList() {
        console.log("initData........", this.token);
        let _this = this;
        // 自定义加载图标
  
        Toast.loading({
          duration: 0,
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
  
        axios({
          method: "post",
          headers: {
            Authorization: "Bearer " + this.token,
          },
          params: _this.params,
          data: {
            isDataFilter: true,
          },
          url: "/scm/api/v1/scmPurchaseContractHead/list",
        })
          .then((response) => {
            if (response.data.code === 0) {
              if (_this.tableData.length == 0) {
                _this.tableData = response.data.data;
              } else {
                _this.tableData = [..._this.tableData, ...response.data.data];
              }
  
              _this.total = response.data.total;
            }
            Toast.clear();
          })
          .catch((response) => {
            Toast.clear();
            console.log("response", JSON.stringify(response));
            if (response.status == 401) {
              Toast({
                duration: 500,
                message: "用户认证失效~",
              });
              uni.postMessage({
                data: {
                  action: "navigateTo",
                  id: "1001",
                },
              });
            } else {
              Toast({
                duration: 500,
                message: "网络错误~",
              });
            }
          });
      },
      touchSearch() {
        console.log("touchSearch........");
        if (this.total > 0 && this.params.page < this.total / this.params.size) {
          console.log(this.params.page);
          this.params.page++;
          this.getList();
        } else {
          Toast({
            duration: 500,
            message: "没有更多数据了~",
          });
        }
      },
    },
  };
  </script>
  
  <style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  </style>
  